<template>
  <div>
    <!-- <van-tabbar fixed route active-color="#fdc03a" /> -->
    <router-view />

    <van-tabbar v-if="$store.state.user" fixed route active-color="#fd983a" placeholder v-model="active" style="height: 10vh;">
      <!-- 首页 -->
      <van-tabbar-item replace to="/index">
        <span>首页</span>
        <template #icon="props">
          <img :src="props.active ? icon_home.active : icon_home.inactive" />
        </template>
      </van-tabbar-item>

      <!-- 攻略 -->
      <van-tabbar-item replace to="/horizontal">
        <span>攻略</span>
        <template #icon="props">
          <img :src="props.active ? icon_glue.active : icon_glue.inactive" />
        </template>
      </van-tabbar-item>

      <!-- 添加 -->
      <van-tabbar-item  replace to="/submit">
        <span>发布</span>
        <template #icon="props">
          <img
            style="width: 45px; height: 30px;"
            :src="props.active ? icon_fb.active : icon_fb.inactive"
          />
        </template>
      </van-tabbar-item>

      <!-- 摄影 -->
      <van-tabbar-item replace to="/vote">
        <span>投票</span>
        <template #icon="props">
          <img :src="props.active ? icon_pic.active : icon_pic.inactive" />
        </template>
      </van-tabbar-item>

      <!-- 我的 -->
      <van-tabbar-item replace to="/me">
        <span>我的</span>
        <template #icon="props">
          <img :src="props.active ? icon_me.active : icon_me.inactive" />
        </template>
      </van-tabbar-item>

    </van-tabbar>


    <van-tabbar v-else fixed route active-color="#fd983a" placeholder v-model="active">

      <!-- 首页 -->
      <van-tabbar-item replace to="/index">
        <span>首页</span>
        <template #icon="props">
          <img :src="props.active ? icon_home.active : icon_home.inactive" />
        </template>
      </van-tabbar-item>

      <!-- 攻略 -->
      <van-tabbar-item replace to="/horizontal">
        <span>攻略</span>
        <template #icon="props">
          <img :src="props.active ? icon_glue.active : icon_glue.inactive" />
        </template>
      </van-tabbar-item>

      <!-- 未登录发布 -->
      <van-tabbar-item @click="gologin()">
        <span>发布</span>
        <template #icon="props">
          <img
            style="width: 45px; height: 30px"
            :src="props.active ? icon_fb.active : icon_fb.inactive"/>
        </template>
      </van-tabbar-item>

      <!-- 未登录投票 -->
      <van-tabbar-item @click="gologin()">
        <span>投票</span>
        <template #icon="props">
          <img :src="props.active ? icon_pic.active : icon_pic.inactive" />
        </template>
      </van-tabbar-item>

      <!-- 未登录我的 -->
      <van-tabbar-item  @click="gologin()">
        <span>我的</span>
        <template #icon="props">
          <img :src="props.active ? icon_me.active : icon_me.inactive" />
        </template>
      </van-tabbar-item>
    </van-tabbar>
    
  </div>
</template>

<script>
import { Dialog } from "vant";
export default {
  data() {
    return {
      // active: 'index',
      active: 0,
      // 主页
      icon_home: {
        active: require('../assets/cs-img/home-active.png'),
        inactive:require('../assets/cs-img/home.png'),
      },
      // 攻略
      icon_glue: {
        active: require('../assets/cs-img/glue-active.png'),
        inactive: require('../assets/cs-img/glue.png'),
      },
      // 发布
      icon_fb: {
        active:require('../assets/cs-img/fb-active.png'),
        inactive: require('../assets/cs-img/fb.png'),
      },
      // 摄影
      icon_pic: {
        active: require('../assets/cs-img/pic-active.png'),
        inactive: require('../assets/cs-img/pic.png'),
      },
      // 我的
      icon_me: {
        active: require('../assets/cs-img/me-active.png'),
        inactive: require('../assets/cs-img/me.png'),
      },
    };
  },
  methods: {
    gologin() {
      Dialog.confirm({
        message: "您还未登录!",
        confirmButtonColor:'rgb(255, 153, 0)',
        confirmButtonText: '去登录',
        width: '75vw'
      }).then(() => {
        this.$router.push('/login')
      }).catch(() => {
      });
    },
  },
};
</script>

<style lang="scss" scoped>
.van-tabbar {
  height: 60px;
  color: rgb(255, 153, 0);
}
</style>
